<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
  $(function(){
 
 $('.searchbar_wrap').searchBar({
    cancelText:"取消",
    searchText:'关键字',
    onfocus: function (value) {
        
    },
    onblur:function(value) {

    },
    oninput: function(value) {
 
    },
    onsubmit:function(value){
    },
    oncancel:function(){

    },

    onclear:function(){

    }
});
  });     
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
<div class="page-hd">
        <h1 class="page-hd-title">
           搜索
        </h1>
        <p class="page-hd-desc"></p>
    </div>
<!--
<div class="weui_search_bar" id="search_bar">
            <form class="weui_search_outer">
                <div class="weui_search_inner">
                    <i class="weui_icon_search"></i>
<input class="weui_search_input" id="search_input" placeholder="搜索" required="" type="search">
                    <a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
                </div>
                <label for="search_input" class="weui_search_text" id="search_text">
                    <i class="weui_icon_search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui_search_cancel" id="search_cancel">取消</a>
        </div>
        -->
        <div class="searchbar_wrap">
</div>

<h2>搜索带按钮</h2>
<div class="weui_search_bar">
<input type="search" class="search-input" id='search' placeholder='关键字' style="box-sizing:content-box"/><button  class="weui_btn weui_btn_mini weui_btn_primary"><i class="icon icon-4"></i></button>    
</div>
</body>
</html>
